<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="./index.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="index.html">
        <div class="box">
          <div class="tab-nav">
            <a href="javascript:;" class="active" data-id="0">账户登录</a>
            <a href="javascript:;" data-id="1">二维码登录</a>
          </div>
          <div class="tab-pane">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username" >
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input required type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="dl">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <img class="code" src="./images/code.png" alt="">
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>
  <script>
    const nav = document.querySelector('.tab-nav');
    const panes = document.querySelectorAll('.tab-pane');
    // 登录方式的切换
    nav.addEventListener('click',function(e){
      if(e.target.tagName === 'A'){
        panes.forEach(function(ele,i){
          ele.style.display = 'none'
        })

        
        // 更换内容
        panes[e.target.dataset.id].style.display = 'block'

        //更改a标签样式
        this.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')

      }
      
    })

    let users = JSON.parse(localStorage.getItem('users')) || []
    


    // 获取对象
    const username = document.querySelector('[name=username]')
    const pwd = document.querySelector('[name=password]')
    const checkBox = document.querySelector('[name=agree]')
    const form = document.querySelector('form')


    // 当用户点击登录时，判断用户密码的正确性
    form.addEventListener('submit',function(e){
      
      // 遍历从浏览器中获取到的用户数组
      let isLogin = false;
      for (let i = 0; i < users.length; i++) {
        // 成功的情况
        if(username.value === users[i].username && pwd.value === users[i].pwd){
          isLogin = true;
        }
      }
      
      // 不成功
      if(!isLogin){
          e.preventDefault();
          return alert('用户名或密码错误')
        }

        // 获取服务协议复选框
        // 判断checked是否为false
        if(!checkBox.checked){
          // 执行confirm
          let bool = confirm('您是否同意服务条款？')
          if(bool){
            checkBox.checked = true
            e.preventDefault();
            return;
            
          }else{
            // 阻止表单提交
            e.preventDefault();
            return;
          }
        }

        // 将用户名存入浏览器当中
        localStorage.setItem('user',username.value)

    })

    
    
    
  </script>
</body>

</html>